<template>
	<view class="page">
		<uni-nav-bar title=" " statusBar color="#fff" backgroundColor="#0091d7" left-icon="left"
			@clickLeft="clickLeft" />
		<scroll-view scroll-y class="container authorization">
			<view class="box">
				<view>
					<text class="title">需要您的授权\n\n</text>
					<text class="msg">请在稍后的提示框中点击“允许”,进行身份验证\n</text>
				</view>
				<view class="img-box">
					<image mode="widthFix"
						src="https://bzhl-dev1.oss-cn-chengdu.aliyuncs.com/bzhl/miniapp/yst/logo.png"></image>
				</view>
				<view class="">
					<label>
						<checkbox :checked="value" @click="value=!value" /><text></text>
					</label>
					同意 <text style="color: #15a9ee;font-size: 28rpx;"
						@click="handleShow">&laquo;用户协议&raquo;</text>和<text style="color: #15a9ee;font-size: 28rpx;"
						@click="handleShow">&laquo;隐私协议&raquo;</text>
				</view>
				<view class="btn-box">
					<button type="primary" class="authBtn" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">手机号一键授权注册/登录</button>
					<button class="backBtn authBtn" @click="dialogToggle('success')">暂不授权</button>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="为不影响下程序正常使用,请进行授权"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<view class="mask" v-if="showDialog">
			<view class="content">
				<view class="title">
					<text>《用户服务协议及隐私保护政策》</text>
					<uni-icons type="closeempty" @click="showDialog = false"></uni-icons>
				</view>
				<view class="">
					{{AgreementTxt}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getPhoneApi,
		getTokenApi,
		getUserApi,
		getAgreementApi
	} from '../../common/API/loginApi.js'
	import {
		getUserInfoApi,
		addFamilyApi,
		editUserInfoApi,
		getProjectCodeApi
	} from '../../common/API/userInfoApi.js'

	import {
		mapMutations
	} from 'vuex'
	var WXBizDataCrypt = require('../../utils/WXBizDataCrypt')
	const app = getApp()
	export default {
		data() {
			return {
				userLogin: {},
				msgType: '',
				value: false,
				showDialog: false,
				AgreementTxt: '',
				famillyId: 0,
				famillyEnter: '',
				famillyInfo: {},
				sessionKey: '',
				openId: '',
				Share: false
			};
		},
		computed: {
			...mapState('user', ['ylProjectCode', 'ylUserInfo'])
		},
		async onLoad(option) {
			if (!this.ylProjectCode) {
				await this.getProjectCode()
			}
			if (option.scene) {
				let scene = decodeURIComponent(option.scene);
				if (scene.split('=')[0] === 'memberCode') {
					this.famillyId = scene.split('=')[1]
					const res = await getUserApi(this.famillyId)
					this.famillyInfo = res.data
				} else {
					this.famillyEnter = scene.split('=')[1]
				}
			}
			if (option.Share) {
				this.Share = true
			}
		},
		onShow() {
			this.getPhone()
		},
		methods: {
			...mapMutations('user', ['MusetToken', 'MusetUserId', 'MusetEnterprise', 'MusetEnterprise', 'MusetUserInfo']),
			async getProjectCode() {
				const res = await getProjectCodeApi()
				// this.MusetProjectCode(res)
			},
			async getAgreement() {
				const key = uni.getStorageSync('ylProject').miniKey
				const res = await getAgreementApi(key)
				if (!res.status === 200) {
					return uni.$showMsg(res.data)
				}
				this.AgreementTxt = res.data
			},
			async getPhone() {
				const r = await getPhoneApi()
				this.sessionKey = r.data.sessionKey
				this.openId = r.data.openId
			},
			async getPhoneNumber(res) {
				if (!this.value) {
					return uni.$showMsg('请同意勾选用户协议及隐私协议')
				}
				//手机号解码
				var pc = await new WXBizDataCrypt(uni.getAccountInfoSync().miniProgram.appId, this.sessionKey)
				var data = pc.decryptData(res.detail.encryptedData, res.detail.iv)
				console.log(data, '解码手机号')
				const spreadCode = uni.getStorageSync('spreadCode') || ''
				const r2 = await getTokenApi(this.openId, data.phoneNumber, spreadCode)
				//登录成功
				this.MusetToken({
					accessToken: r2.data.accessToken,
					phone: data.phoneNumber
				})
				const r4 = await getUserInfoApi()
				this.MusetUserInfo(r4.data)
				
				if (this.famillyEnter) {
					const res = await getShopListApi()
					const item = res.data.find(item => item.enterpriseCode === this.famillyEnter)
					this.MusetEnterprise(item)
				}
				if (!this.famillyEnter && this.Share) {
					return uni.navigateBack()
				}

				return uni.switchTab({
					url: '/pages/home/home'
				})
			},

			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm(res) {},
			dialogClose(res) {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			handleShow() {
				this.showDialog = true
				this.getAgreement()
			},
			clickLeft() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
	}

	.box {
		text-align: center;
		margin-top: 50rpx;
	}

	.authBtn {
		margin: 20rpx 0;
		border-radius: 60rpx;
	}

	.btn-box {
		padding: 0 60rpx;
	}

	.container {
		margin-top: 50rpx;
	}

	.img-box {
		width: 250rpx;
		height: 250rpx;
		border-radius: 125rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		margin: 40rpx auto;

		image {
			// height: 250rpx;
			// width: 250rpx;
		}
	}

	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);

		.content {
			height: 80%;
			width: 100%;
			background-color: #fff;
			position: absolute;
			bottom: 0;
			left: 0;

			.title {
				display: flex;
				justify-content: space-around;
				padding: 20rpx 0;
			}
		}
	}
</style>
